<template>
<view class="page">
  <view class="top-container" :style="{ backgroundImage: `url(${imgUrl})`,paddingTop:`${sysInfo.statusBarHeight}px` }">
    <view class="flex-row" :style="{ height: `${sysInfo.navigationBarHeight}px`}">
      <u-icon name="arrow-left" color="#fff" @click="handleToBack"></u-icon>
      <text>分享好友</text>
      <view class="blank"></view>
    </view>
  </view>
  <view class="content">
    <image :src="invitePhoto[0]" style="width: 100%" mode="widthFix"></image>
    <view class="flex-row">
      <u-button type="primary" :customStyle="styleLeft"   text="海报分享" @click="handleToPoster"></u-button>
      <u-button type="primary" :customStyle="styleRight" plain  text="新闻分享" @click="handleToNews"></u-button>
    </view>
  </view>
</view>
</template>

<script>
import bgBase64 from "@/static/const/bgBase64";
import PHOTO from "@/static/const/photo";
import {getImgUrl, isEmptyArray} from "@/utils/common";
export default {
  name: "index",
  data() {
    return {
      imgUrl: bgBase64.inviteFriendBg,
      invitePhoto: [],
      styleLeft: {
        width: "45%",
        height: "40px",
        fontSize: "14px",
        color: "#fff",
        backgroundColor: "#E44433",
        borderColor: "#E44433",
      },
      styleRight:{
        width: "45%",
        height: "40px",
        fontSize: "14px",
        color: "#E44433",
        borderColor: "#E44433",

      },
      sysInfo:{
        statusBarHeight: 0, // 状态导航栏高度
        navHeight: 0, // 总体高度
        navigationBarHeight: 128, // 导航栏高度(标题栏高度)
      },
    };
  },
  onLoad() {
    this.getInfo();
   this.getPhoto();
  },
  methods: {
    //获取标题栏高度
    getInfo() {
      // 状态栏高度
      this.sysInfo.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

      // #ifdef MP-WEIXIN
      // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
      const custom = wx.getMenuButtonBoundingClientRect()
      // console.log(custom)

      // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
      this.sysInfo.navigationBarHeight = custom.height + (custom.top - this.sysInfo.statusBarHeight) * 2
      // console.log("导航栏高度："+this.globalData.navigationBarHeight)

      // 总体高度 = 状态栏高度 + 导航栏高度
      this.sysInfo.navHeight = this.sysInfo.navigationBarHeight + this.sysInfo.statusBarHeight

      // #endif
    },

    getPhoto() {
     this.$store.dispatch("GetAboutMeList",{
       type:PHOTO.INVITE,
       current:1,
       size:10
     }).then((res) => {
       if(!isEmptyArray(res.data.records)){
         this.invitePhoto =getImgUrl(res.data.records[0].content) ;
       }
     });
    },
    // 返回上一页
    handleToBack() {

      uni.navigateBack({
        delta: 1,
      });
    },
    // 跳转到新闻分享
    handleToNews() {
      uni.switchTab({
        url: "/pages/news/index",
      });
    },
    // 跳转到海报分享
    handleToPoster() {
      uni.navigateTo({
        url: "/pages/invite/posterShare/index",
      });
    },
  },
}
</script>

<style scoped lang="scss">
  page{
    position: relative;
    height: 100%;
    .top-container{
      width: 100%;
      height:10rem;
      background-size: cover;
      .flex-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        text{
          font-size: 1rem;
          color: #fff;
        }
        .blank{
          width: 1rem;
        }
      }
    }
    .content{
      position: absolute;
      top: 8rem;
      width: 100%;
      height: calc(100% - 5rem);
      background-color: #fff;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px 40px 2rem;

      .flex-row{
        margin-top: 20px;
        width: 100%;
        justify-content: space-evenly;
      }
    }
  }
</style>